<template>
  <section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox" :checked="isAllChecked" @change="changeFn">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li :class="{completed:item.isDone==true}"  v-for="(item,index) in arr" :key="item.id">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.isDone">
							<label>{{item.name}}</label>
							<button class="destroy" @click="del(index)"></button>
						</div>
					</li>
				</ul>
			</section>
</template>

<script>
export default {
	props:['arr'],
	methods:{
		del(index){
			if(confirm('确定要删除吗?')){
			this.$emit('delTodo',index)
			}
		},
		changeFn(e){
			this.arr.forEach(item=>item.isDone=e.target.checked)
		}
	},
	computed:{
    isAllChecked(){
    return  this.arr.every(item=>item.isDone)
    }
  },
}
</script>

<style>

</style>